<script src="@/js/culture/tiangan.js"></script>

<template>
  <div class="tiangan" id="app">
    <div class="margins">

      <!-- 导航 -->
      <el-affix>
        <div class="affix">
          <Breadcrumb separator=">">
            <span v-for="item in navigations" :key="item">
              <BreadcrumbItem :to="item.link">
                <Icon :type="item.icon" />
                {{ item.title }}
              </BreadcrumbItem>
            </span>
          </Breadcrumb>
        </div>
        <div class="divider">
          <el-divider />
        </div>
      </el-affix>

      <!-- 数据 -->
      <div class="data">

        <el-row :gutter="15">
          <el-col :span="21">
            <el-card shadow="always" class="card1">

              <el-row :gutter="40">
                <el-col :span="12">
                  <el-card shadow="never" class="option-card">
                    <div class="title" @click="pageTable = 0">
                      基本介绍
                      <span v-show="pageTable === 0">
                        <Icon type="ios-arrow-dropdown-circle" />
                      </span>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card shadow="never" class="option-card">
                    <div class="title" @click="pageTable = 1">
                      详细解读
                      <span v-show="pageTable === 1">
                        <Icon type="ios-arrow-dropdown-circle" />
                      </span>
                    </div>
                  </el-card>
                </el-col>
              </el-row>

              <div class="content">
                <div v-show="pageTable === 0">

                  <div>
                    <el-tag round type="info" effect="dark">
                      <span>古文献参考</span>
                    </el-tag>
                  </div>
                  <div>
                    <div>
                      <b>《春秋命历序》</b>
                      中记载：“天地开辟，万物浑浑，无知无识。阴阳所凭，天体始于北极之野，地形起于昆仑之虚，日月五纬俱起牵牛。四万五千年，日月五纬一轮转。天皇出焉，号曰‘防五’，兄弟十三人继相治。乘风雨，夹日月以行。定天之象，法地之仪，作干支以定日月度，共治一万八千岁。天皇被迹在柱州昆仑山下。”。
                    </div>
                    <br />
                    <div>
                      <b>《三命通会》</b>
                      中记载：“夫干犹木之干，强而为阳；支犹木之枝，弱而为阴。昔盘古氏明天地之道，达阴阳之变为三才。首君以天地既分之后，先有天而后有地，由是气化而人生焉，故天皇氏一姓十三人，继盘古氏以治，是曰天灵淡泊，无为而俗自化，始制干支之名，以定岁之所在。”。
                    </div>
                  </div>
                  <br />
                  <div>
                    <el-tag round type="info" effect="dark">
                      <span>何谓天干？</span>
                    </el-tag>
                  </div>
                  <div>
                    天干指天干地支中的十个天干，是中国传统的一种文字记序符号，循环使用。分别为：<b><u>甲、乙、丙、丁、戊、己、庚、辛、壬、癸</u></b>；天干地支共同组成了中国古代传统历法纪年。
                  </div>
                  <br />
                  <div>
                    <el-tag round type="info" effect="dark">
                      <span>天干的起源</span>
                    </el-tag>
                  </div>
                  <div>
                    <div>
                      古文献记载，前三皇之后，乃是中三皇。其首中天皇君，史书上说中天皇君兄弟十三人，号曰天灵，起于天灵山，发明天干、地支等，人推为皇。其余兄弟十二人带领部众各占一方，立国称皇，各传国一万八千年。
                    </div>
                    <br />
                    <div>
                      天干的发明，以天皇兄弟十三人的名称命名，除中央天皇天灵氏外，还有兄弟十二人，后以十兄弟为十天干，即：<b><u>阏逢、旃蒙、柔兆、强圉、著雍、屠维、上章、重光、玄黓、昭阳</u></b>。
                    </div>
                  </div>
                  <br />
                  <div>
                    <el-tag round type="info" effect="dark">
                      <span>&nbsp;&nbsp;读音参考&nbsp;&nbsp;</span>
                    </el-tag>
                  </div>
                  <div>
                    阏逢（yān féng）、旃蒙（zhān méng）、柔兆（róu zhào）、强圉（qiáng yǔ）、著雍（chú yōng）、
                    屠维（tú wéi）、上章（shàng zhāng）、重光（chóng guāng）、玄黓（xuán yì）、昭阳（zhāo yáng）
                  </div>

                </div>
                <div v-show="pageTable === 1">

                  <div>
                    <span>
                      <el-autocomplete size="small" maxlength="2" show-word-limit value-key="name" :debounce="300"
                        v-model="queryData" :fetch-suggestions="querySearch" @click.native="pageData2" clearable
                        placeholder="请输入天干名称（如：甲 或 阏逢）" style="width:260px;">
                        <template #prefix>
                          <el-icon class="el-input__icon">
                            <search />
                          </el-icon>
                        </template>
                        <template #default="{ item }">
                          <span v-html="brightenKeyword(item.name, queryData) "></span>
                        </template>
                      </el-autocomplete>
                    </span>
                    <span>
                      &nbsp;
                      <Button size="small" icon="ios-search" @click="">搜索</Button>
                    </span>
                    <span class="page">
                      <el-pagination small background class="pageList" :pager-count="3"
                        :page-sizes="[10, 20, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                        :total="dataTotal" :current-page.sync="page" :page-size="pageSize"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                      </el-pagination>
                    </span>
                  </div>

                  <div class="divider">
                    <el-divider />
                  </div>

                  <div v-show="data && data.length !== 0">
                    <div v-for="item in data" :key="item" class="for">
                      <el-card shadow="hover">
                        <div class="name">【<b v-html="showDataMethod(item.name)"></b>】</div>
                        <div>
                          <div>
                            {{ item.wenXian.split("#")[1] }}
                          </div>
                          <div class="wenxian">
                            {{ item.wenXian.split("#")[2] }}
                          </div>
                        </div>
                        <br />
                        <div>
                          <b>别称： </b>
                          <span v-html="showDataMethod(item.bieCheng)"></span>
                        </div>
                        <div>
                          <b>含义：</b>
                          {{ item.meaning }}
                        </div>
                        <div>
                          <b>相生：</b>
                          {{ item.xiangSheng }}
                        </div>
                        <div>
                          <b>相合：</b>
                          {{ item.xiangHe }}
                        </div>
                        <div v-if="null !== item.xiangChong">
                          <b>相冲：</b>
                          {{ item.xiangChong }}
                        </div>
                        <div>
                          <b>相克：</b>
                          {{ item.xiangKe }}
                        </div>
                        <div>
                          <b>得失令：</b>
                          {{ item.deShiLing }}
                        </div>
                        <div>
                          <b>喜恶神：</b>
                          {{ item.xiEShen }}
                        </div>
                        <div>
                          <b>季节旺衰：</b>
                          {{ item.wangXiangXiuQiuSi }}
                        </div>
                        <div>
                          <b>十二长生：</b>
                          {{ item.zhangSheng }}
                        </div>
                        <br />
                        <div>
                          <b>万物类象：</b>
                          <div class="leixiang">
                            <div v-for="lx in item.leiXiang.length" :key="lx">
                              {{ item.leiXiang.split("#")[lx] }}
                            </div>
                          </div>
                        </div>
                        <div class="index">
                          {{ item.id }}
                        </div>
                      </el-card>
                    </div>
                  </div>
                  <div v-show="data.length === 0" class="null">
                    暂无数据
                  </div>

                </div>
              </div>

            </el-card>
          </el-col>

          <el-col :span="3">
            <el-card shadow="never" class="card2">
              <div class="header">
                更多
              </div>

              <div class="selest">
                <div v-for="item in mores" :key="item" class="item">
                  <router-link :to="item.link">
                    <div class="title">
                      <Icon type="ios-arrow-dropright" />
                      {{ item.title }}
                    </div>
                  </router-link>

                </div>

                <div class="plan">
                  敬请期待 ...
                </div>
              </div>
            </el-card>
          </el-col>

        </el-row>

      </div>

    </div>
  </div>
</template>

<style scoped lang="less" src="@/css/culture/tiangan.scss"></style>
